<template>
  <div class="register-wrapper">
    <div class="modal">
      <el-form ref="userRegisterForm" :model="registerForm" status-icon :rules="rules">
        <div class="title">GK物联网平台</div>
        <el-form-item prop="username">
          <el-input type="text" prefix-icon="el-icon-user" placeholder="账号" v-model="registerForm.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" prefix-icon="el-icon-view" placeholder="密码" v-model="registerForm.password" />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input type="password" prefix-icon="el-icon-view" placeholder="确认密码"
            v-model="registerForm.confirmPassword" />
        </el-form-item>
        <el-form-item prop="name">
          <el-input type="text" prefix-icon="el-icon-user" placeholder="姓名" v-model="registerForm.name" />
        </el-form-item>
        <el-form-item prop="email">
          <el-input type="text" prefix-icon="el-icon-message" placeholder="邮箱" v-model="registerForm.email"
            style="width: 65%; margin-right: 5%;" />
          <div class="login-code">
            <el-button type="primary" :disabled="disableBtn" class="btn-code" @click="getCheckCode">{{ emailBtnName }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item prop="checkCode">
          <el-input type="text" prefix-icon="el-icon-mobile" placeholder="验证码" v-model="registerForm.checkCode" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="btn-register" @click="register">注册</el-button>
          <div style="float: right;">
            <router-link class="link-type" :to="'/login'">使用已有账户登录</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
  name: 'register',
  data() {
    return {
      registerForm: {
        name: '',
        email: '',
        username: '',
        password: '',
        confirmPassword: ''
      },
      rules: {
        username: [
          {
            required: true, message: "请输入账户", trigger: "blur"
          }
        ],
        name: [
          {
            required: true, message: "请输入姓名", trigger: "blur"
          }
        ],
        email: [
          {
            required: true,
            message: "请输入用户邮箱",
            trigger: "blur"
          },
          {
            pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入正确的用户邮箱",
            trigger: "blur",
          },
        ],
        password: [
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\W]{6,18}$/,
            required: true, 
            message: "请输入必须包含字母和数字，且在6-18位之间的密码", 
            trigger: "blur"
          }
        ],
        confirmPassword: [
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\W]{6,18}$/,
            required: true, 
            message: "请输入必须包含字母和数字，且在6-18位之间的密码", 
            trigger: "blur"
          }
        ]
      },
      emailBtnName: '获取验证码',
      disableBtn: false,
      btnTime: 0,
      circulationTimer: ''
    }
  },

  methods: {
    getCheckCode() {
      this.$refs.userRegisterForm.validate((valid) => {
        if (valid) {
          this.disableBtn = true;
          this.btnTime = 60;
          this.timerBtn();
          this.$api.getEmailCheckCode(this.registerForm).then((res) => {
            ElMessage({
              type: 'success',
              message: '验证码已发送至邮箱',
            })
          })


        } else {
          return false;
        }
      })
    },
    timerBtn() {
      //进入倒计时
      if (this.btnTime > 0) {
        this.btnTime--;
        this.emailBtnName = this.btnTime + '秒后重试';
        this.circulationTimer = setTimeout(this.timerBtn, 1000)
      } else {
        this.btnTime = 0;
        this.emailBtnName = '获取验证码';
        this.disableBtn = false;
        clearTimeout(this.circulationTimer);
      }
    },
    register() {
      this.$refs.userRegisterForm.validate((valid) => {
        if (this.registerForm.password != this.registerForm.confirmPassword) {
          ElMessage({
            type: 'warning',
            message: '密码两次输入不匹配',
          })
        } else {
          if (valid) {
            this.$api.register(this.registerForm).then((res) => {
              ElMessageBox.confirm('注册成功，系统自动为您跳转到登陆界面？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'success'
              }).then(async () => {
                this.$router.push('/login')
              }).catch(() => { });
            })
          } else {
            return false;
          }
        }

      })
    }
  }
}
</script>

<style lang='scss'>
.register-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
  width: 100vw;
  height: 100vh;

  .modal {
    width: 500px;
    padding: 50px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 0px 10px 3px #c7c9cb4d;

    .title {
      font-size: 25px;
      line-height: 1.5;
      text-align: center;
      margin-bottom: 30px;
    }

    .login-code {
      width: 30%;
      float: right;

      .btn-code {
        float: right;
        width: 100%;
      }
    }

    .btn-register {
      width: 100%;
    }
  }
}
</style>
